<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>表格隔行换色</title>
<style type="text/css">
	table {border:#0099FF 1px solid;width:500px;border-collapse:collapse;}
	table th, table td {border:#0099FF 1px solid;padding:10px 0px 10px 10px;}
	table th {background-color:#00CCFF;}
	div{text-align: center; padding:20px; color:red;}
	.one {
		background-color:#daf1aa;
	}
	.two {
		background-color:#aba2eb;
	}
	.hover {
		background-color:#FF0000;
	}
</style>

<script type="text/javascript">
	/* 练习1：点击按钮让表格行隔行换色 */
	function changColor(){
		//获取所有tr元素组成的数组
		var aTr = document.getElementsByTagName("tr");
		//循环遍历tr数组中的每一个tr元素
		for(var i=1; i<aTr.length; i++){
			if(i%2 == 0){//奇(偶)数行,设置为one
				aTr[i].className = "one";
			}else{//偶(奇)数行,设置为one
				aTr[i].className = "two";
			}
		}
	}
	
	/* function changeColor2() {
		var arr = document.getElementsByTagName("tr");
		for (var i = 0; i < arr.length; i++) {
			if (i % 2 == 0) {
				arr[i].style.backgroundColor = "pink";
			} else {
				arr[i].style.backgroundColor = "blue";
			}
		}
	} */

	/* 练习2：当鼠标悬停在表格行元素上时，让当前行变色；当鼠标移开元素，恢复默认样式
	   onload：当页面加载完所有的html元素后，立即执行function  */
	window.onload = function(){
		//获取所有tr元素组成的数组
		var aTr = document.getElementsByTagName("tr");
		for(var i=1; i<aTr.length; i++){
			var classNameTemp;
			//当光标移入元素时
			aTr[i].onmouseover = function(){
				/* 这里不要用aTr[i]来获取元素，因为循环完成之后，i的值会等于aTr.length -1。所以这里使用this表示当前对象 */
				classNameTemp = this.className;//记住改变之前的class
				this.className = "hover";
			}
			//当光标移出元素时
			aTr[i].onmouseout = function(){
				this.className = classNameTemp;
			}
		}
	}
</script>
</head>
<body>
	<div><input type="button" onclick="changColor()" value="点击按钮隔行换色"/></div>
	<table align="center">
		<tr>
			<th>电影名称</th>
			<th>电影介绍</th>
			<th>主演名单</th>
		</tr>
	    <tr>
			<td>变形金刚</td>
			<td>很不错的电影</td>
			<td>机器人</td>
		</tr>
		<tr>
			<td>唐伯虎点秋香</td>
			<td>非常好的电影</td>
			<td>周星驰,巩俐</td>
		</tr>
		<tr>
			<td>东邪西毒</td>
			<td>群星云集的电影</td>
			<td>张国荣,梁朝伟...</td>
		</tr>
		<tr>
			<td>少林足球</td>
			<td>最厉害的足球电影</td>
			<td>周星驰,赵薇</td>
		</tr>
		<tr>
			<td>赌神</td>
			<td>小马哥演绎赌神</td>
			<td>周润发</td>
		</tr>
		<tr>
			<td>大话西游</td>
			<td>超级搞笑的电影</td>
			<td>周星驰</td>
		</tr>
		<tr>
			<td>疯狂的石头</td>
			<td>一部让人大笑不止的电影</td>
			<td>黄渤</td>
		</tr>
	</table>
	<div>(试试将鼠标移入到表格行内，将背景设置为红色)</div>
	<div id='testdiv' style="width:20px;height: 109px;border: 2px solid blue;" onmouseover="mouseoverFn()" onmouseout="mouseoutFn()"></div>
	<script type="text/javascript">
		function mouseoverFn() {
			console.log("鼠标悬停在元素上");
			var div = document.getElementById("testdiv");
			div.style.background = "red";
		}
		
		function mouseoutFn() {
			console.log("鼠标离开了元素");
			var div = document.getElementById("testdiv");
			div.style.background = "#fff";
		}
	</script>
</body>
</html>
